<template>
  <div class="flex flex-col items-center relative w-full h-full bg-white">
    <div class="fixed top-0 left-0 w-full h-10 drag">
      <div
        class="absolute top-[15px] right-[15px] cursor-pointer rounded-[5px] p-1.5 transition-all no-drag"
        @click="handleExitApp"
      >
        <icon-svg-header-nav-close class="text-[18px]" />
      </div>
    </div>
    <div class="w-[90px] h-[90px] mt-[60px]">
      <img :src="logoImage" width="90" height="90" alt="logo" class="block" />
    </div>
    <h1 class="mt-4 text-[20px] text-[#010101] font-serif font-extrabold">{{ appTitle }}</h1>
    <Form
      autocomplete="off"
      :label-col="{ style: { width: '40px' } }"
      layout="horizontal"
      :model="reactiveState"
      class="mt-8"
    >
      <FormItem label="账号" name="username">
        <AInput
          class="w-[200px] rounded-none border-gray-300 focus:border-[#001428] focus:shadow-[0_0_0_2px_rgba(3,14,21,0.14)] hover:border-[#001428]"
          placeholder="请输入你的手机号码"
          :maxlength="20"
          v-model:value="reactiveState.userName"
        />
      </FormItem>
      <FormItem label="密码" name="password" class="!mt-2">
        <InputPassword
          class="w-[200px] rounded-none border-gray-300 focus:border-[#001428] focus:shadow-[0_0_0_2px_rgba(3,14,21,0.14)] hover:border-[#001428]"
          placeholder="请输入账号密码"
          v-model:value="reactiveState.password"
          @keydown.enter="handleLogin"
        />
      </FormItem>
    </Form>

    <AButton
      type="primary"
      class="custom-abtn mt-[42px] w-[140px]"
      :loading="loginLoading"
      @click="handleLogin"
    >
      登录
    </AButton>
    <span class="mt-5 text-base font-light text-[#999] hidden">忘记密码？</span>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { InputPassword, Form, FormItem } from 'ant-design-vue';
import logoImage from '@shared/assets/images/svg/logo.svg';
import { appTitle } from '#common/configs/build-const';
import { useUserStore } from '@shared/store/user';
import { useMessage } from '@shared/hooks/web/useMessage';
import { useRouter } from 'vue-router';
import { loginShowMainWindow } from '@main/utils/window';
import { useAppStore } from '@shared/store/app';
import { cloneDeep } from 'lodash-es';

defineOptions({ name: 'Login' });

const { createMessage } = useMessage();

const appStore = useAppStore();
const userStore = useUserStore();
const router = useRouter();
const loginLoading = ref(false);

const reactiveState = reactive(
  (() => {
    const persistLoginAccountData = userStore.getLocalPersistLoginAccountData();
    if (persistLoginAccountData) {
      return persistLoginAccountData;
    }
    return {
      userName: '',
      password: '',
      autoLogin: false
    };
  })()
);

onMounted(() => {
  // 自动登录
  if (reactiveState.autoLogin && reactiveState.userName && reactiveState.password) {
    handleLogin();
  }
});

const handleLogin = async () => {
  if (loginLoading.value) {
    return;
  }
  if (!reactiveState.userName.trim()) {
    createMessage.error('请输入你的手机号码');
    return;
  }
  if (!reactiveState.password.trim()) {
    createMessage.error('请输入账号密码');
    return;
  }

  loginLoading.value = true;
  try {
    const submitData = cloneDeep(reactiveState);
    await userStore.userLoginAction(submitData);
    userStore.saveLocalPersistLoginAccountData(submitData);
    loginLoading.value = false;
    loginShowMainWindow(300, async () => {
      try {
        //跳逛逛达人
        await router.replace({ name: 'Workflow' });
      } catch (error) {
        console.error('login router.replace error >>>', error);
      }
    });
  } catch (error) {
    loginLoading.value = false;
    console.error(error);
  }
};

const handleExitApp = () => {
  appStore.exitApp();
};
</script>

<style lang="less" scoped>
/* 使用深度选择器覆盖子组件样式 */
:deep(.ant-form .ant-col) {
  flex: auto !important;
}

.ant-form .ant-form-item {
  margin: 0;
}

.ant-input {
  border-radius: 0;
}

.ant-input:hover,
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
  border-color: @border-color;
}

.ant-input:focus {
  border-color: @border-color;
  box-shadow: 0 0 0 2px rgba(3, 14, 21, 0.14);
}

.ant-input-affix-wrapper-focused {
  border-color: @border-color;
  box-shadow: 0 0 0 2px rgba(3, 14, 21, 0.14) !important;
}

.custom-abtn {
  box-shadow: none !important;
  color: #fff !important;
  &.ant-btn-primary {
    background-color: #001428 !important;
  }
  &.ant-btn-primary:disabled {
    opacity: 0.65 !important;
  }
}
</style>
